<!DOCTYPE html>
<html>
<head>
    <title>Upload PPT File</title>
    <link href="/static/layui/css/layui.css" rel="stylesheet">
    <script src="/static/js/jquery-2.2.2.min.js"></script>
    <style>
        /* 加载动画样式 */
        .loading {
            width: 100%;
            height: 358px;
            display: flex;
            justify-content: center;
            margin-top: 150px;
        }
        /*.layui-col-md6{
            background-color: #fff;
        }
        .image_div{
            width: 50%;
            float: left;
        }
        .image_{
            width: 100%;
            height: 100%;
            margin-left: -14px;
        }
        .p_div{
            width: 50%;
            float: left;
            margin-left: -1px;
        }*/

        .image-container {
            max-width: 200px; /* 最大宽度 */
            max-height: 200px; /* 最大高度 */
        }

        .image-container img {
            width: 100%; /* 图片宽度为容器宽度的100% */
            height: auto; /* 高度自动调整以保持比例 */
        }

    </style>
    <script>
        $(document).ready(function(){
            // 当文件选择框中选择文件时，更新显示文件名并直接触发表单的提交事件
            $('#fileInput').on('change', function(){
                var fileName = $(this).val().split('\\').pop();
                $('#fileNameDisplay').text(fileName);
                $('#uploadForm').submit(); // 直接触发表单提交
            });

            // 当表单提交时
            $('#uploadForm').submit(function(e){
                e.preventDefault(); // 阻止表单默认提交行为
                $('.upload_div').hide();
                // 显示加载动画
                $('.loading').show();

                // 构建FormData对象
                var formData = new FormData();
                formData.append('file', $('#fileInput')[0].files[0]);

                // 发送Ajax请求
                $.ajax({
                    url: '/office/pptUpload', // 上传地址
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(response){
                        debugger
                        let imageService = $("#imageService").val();
                        $('.layui-panel').remove();
                        let html = "";
                        if (response.success){
                            let ppts  = response.data;
                            for (key in ppts){
                                let ppt = ppts[key];
                                let images = ppt.images.split(";");
                                let image = '';
                                for (k2 in images){
                                    if (images[k2] != null && images[k2] != ''){
                                        image += '<img src="'+ imageService + images[k2]+'" style="width: 450px;">'
                                    }

                                }
                                html += `
                                    <div class="layui-panel">
                                        <div style="padding: 32px;">
                                            `+image+`
                                            <p>`+ppt.content+`</p>
                                        </div>
                                    </div>
                                    `;
                            }
                            $('.data_after').after(html)

                        }

                    },
                    error: function(xhr, status, error){
                        // 上传失败后的处理
                        alert("Error: " + error);
                        $('.loading').hide();
                        $('.upload_div').hide();
                    },
                    complete: function(){
                        // 隐藏加载动画
                        $('.loading').hide();
                        $('.upload_div').hide();
                    }
                });
            });
        });

        function uploadFormPPT(){
            $('#fileInput').click()
        }
    </script>
</head>
<body>
<div style="" class="upload_div">
    <div style="display: flex;justify-content: center;align-items: center;height: 350px;">
        <h2></h2>
    </div>
    <div style="display: flex;justify-content: center;align-items: center">
        <button type="button" class="layui-btn" id="ID-upload-demo-btn" onclick="uploadFormPPT()">
             上传PPT
        </button>

        <form id="uploadForm" enctype="multipart/form-data" style="display: none">
            <input type="file" id="fileInput" name="file" accept=".ppt, .pptx, .xls, .xlxs">
            <label for="fileInput"></label>
            <span id="fileNameDisplay"></span>
        </form>
    </div>

</div>
<!-- 加载动画 -->
<div class="loading" style="display: none">
    <img src="/static/img/office/loading4.gif" alt="Loading..." style="height: 100%;">
</div>
<div class="data_after">

</div>
<input th:value = "${imageService}" style="display: none" id="imageService">
<!--<div class="layui-panel" >
    <div style="padding: 32px;">
        <img th:src="@{{imageService}(imageService=${imageService})}"  alt="Loading..." style="height: 450px;">
        <p>面板任意内容</p>
    </div>
</div>-->

<script src="/static/layui/layui.js"></script>
</body>
</html>
